<template>
	<view class="page back">

		<view class="f-st">

			<u-form :model="form" :rules="rules" ref="uForm">
				<u-form-item labelWidth="80" label="旧密码" borderBottom prop="oldpassword">
					<u-input :password="true" v-model="form.oldpassword"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入旧密码" maxlength="12"
						type="password" @blur="validateOldPassword"></u-input>

				</u-form-item>

				<u-form-item labelWidth="80" label="新密码" borderBottom prop="newpassword">
					<u-input :password="true" v-model="form.newpassword"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入新密码" maxlength="12"
						type="password" @blur="validateNewPassword"></u-input>

				</u-form-item>

				<u-form-item labelWidth="80" label="确认密码" borderBottom prop="confirmpassword">
					<u-input :password="true" v-model="form.confirmpassword"
						prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入确认密码" maxlength="12"
						type="password" @blur="validateConfirmPassword"></u-input>

				</u-form-item>

				<u-form-item labelWidth="80" label="验证码" borderBottom prop="captcha">
					<u-input v-model="form.captcha" prefixIconStyle="font-size: 22px;color: #909399;width:7rem" border="bottom"
						placeholder="请输入验证码" maxlength="12" type="text">
					<template slot="suffix">
						<image style="width: 3rem;height: 1.6rem;" :src="captchaSrc" alt="验证码,看不清楚?请点击刷新验证码" border="1"
					 class="click"  @click="refreshCaptcha"></image>
					</template></u-input>
					
					
				</u-form-item>
			</u-form>

			<u-button color="#ff5a08" @click="submitForm" style="margin-top: 1rem;" text="确认修改"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchaSrc: "",
				form: {
					phonenumber: "",
					oldpassword: "",
					newpassword: "",
					confirmpassword: "",
					captcha: "",
				},

				rules: {
					oldpassword: [{
						required: true,
						message: '旧密码不能为空',
						trigger: 'blur'
					}],
					newpassword: [{
							required: true,
							message: '新密码不能为空',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '新密码长度不能少于6位',
							trigger: 'blur'
						}
					],
					confirmpassword: [{
							required: true,
							message: '确认密码不能为空',
							trigger: 'blur'
						},
						{
							validator: this.validateConfirmPassword,
							trigger: 'blur'
						}
					],
					captcha: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.getcapth()
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {

			async submitForm() {

				
					this.$refs.uForm.validate().then(async (red) => {
						// // 校验通过，执行提交操作
						const {uid} = uni.getStorageSync('uid')
						const param = {
							confirmPassword: this.form.confirmpassword,
							newPassword: this.form.newpassword,
							oldPassword: this.form.oldpassword,
							captcha:this.form.captcha,
							userId: uid
						}
						const res = await this.$request.post('/system/user/updateByPwd', param)
						console.log(res);
						if (res.code == 200) {

							this.$refs.uToast.show({
								type: 'success',
								title: '成功主题(带图标)',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'

							})
						} else {
							this.$refs.uToast.show({
								type: 'error',
								icon: false,
								title: '失败主题',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'

							})
						}
						
					}).catch(() => {
						// 校验失败
						uni.$u.toast('校验失败');
					});
				

			},
			async getcapth() {

				const res = await this.$request.get('/system/user/captcha', {})
				console.log(res);
				if (res.code == 200) {

					this.captchaSrc = 'data:image/jpeg;base64,' + res.data.captchaImage;
				}

			},
			refreshCaptcha() {
				this.getcapth()
			},
			validateConfirmPassword(rule, value, callback) {
				if (value !== this.form.newpassword) {
					callback(new Error('确认密码与新密码不一致'));
				} else {
					callback();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		width: 100%;
		height: 100vh;
		background: #ffffff;
	}

	.f-st {
		width: 90vw;
		height: auto;
		margin: 0 auto;
		background-color: #ffffff;
	}

	// /deep/.u-border-bottom {
	// 	border: 0.5px solid #f3b10a;
	// }

	// .inputmap {
	// 	border: 0.5px solid #f3b10a;
	// }

	.title-pad {
		text-align: center;
		width: 100%;
		padding-top: 1rem;
	}
</style>